<template>
  <div class="invit_warp">
    <div class="i_nav">
      <div class="i_nav_left">
        <span @click='changeKey("essence")'>精华</span>
        <span @click='changeKey("hot")'>热门</span>
        <span @click='changeKey("new")'>最新</span>
        <span @click='changeKey("all")'>全部主题</span>
      </div>
      <div class="i_nav_right">
        <span>发布人</span>
        <span>发布日期</span>
        <span>阅读数量</span>
      </div>
    </div>
      <ul>
        <li class="invit_list" v-for="list in dataList" :key="list.id">
          <div class="ico" :class="list.ico"></div>
          <div class="invit_title" :class="list.color">
            {{list.title}}
          </div>
          <div class="invit_user">
            <span class="color1">{{list.relect_name}}</span>
            <span class="color3">{{list.relect_time}}</span>
            <span>{{list.view}}</span>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  data(){
    return{
      dataList:[
        {
          ico: 'el-icon-document',
          title: "vue全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy345481',
          color: 'color1'
        },{
          ico: 'el-icon-star-off',
          title: "react全家桶react全家桶react全家桶react全家桶react全家桶react全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2014-09-09',
          view: 2141,
          id: 'zy125486',
          color: 'color2'
        },{
          ico: 'el-icon-star-off',
          title: "react全家桶react全家桶react全家桶react全家桶react全家桶react全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2014-09-09',
          view: 2141,
          id: 'zy216485',
          color: 'color3'
        },{
          ico: 'el-icon-document',
          title: "全家全家vue全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy3484',
          color: 'color4'
        },{
          ico: 'el-icon-document',
          title: "全家全家全家全家vue全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy2215483',
          color: 'color5'
        },{
          ico: 'el-icon-document',
          title: "小明菜鸡小明菜鸡vue全全家全家全家全家家桶",
          relect_name: '小明菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy315482',
          color: 'color3'
        },{
          ico: 'el-icon-document',
          title: "小明菜鸡小明菜鸡小明菜鸡小明菜鸡小明菜鸡小明菜鸡小明菜鸡小明菜鸡小明菜鸡小明菜鸡小明菜鸡vue全全家全家全家全家家桶",
          relect_name: '小明菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy415482',
        },{
          ico: 'el-icon-document',
          title: "vue全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy5215481',
          color: 'color1'
        },{
          ico: 'el-icon-star-off',
          title: "react全家桶react全家桶react全家桶react全家桶react全家桶react全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2014-09-09',
          view: 2141,
          id: 'zy651345486',
          color: 'color2'
        },{
          ico: 'el-icon-star-off',
          title: "react全家桶react全家桶react全家桶react全家桶react全家桶react全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2014-09-09',
          view: 2141,
          id: 'zy61346485',
          color: 'color3'
        },{
          ico: 'el-icon-document',
          title: "全家全家vue全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy12174',
          color: 'color4'
        },{
          ico: 'el-icon-document',
          title: "全家全家全家全家vue全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy121593',
          color: 'color5'
        },{
          ico: 'el-icon-document',
          title: "小明菜鸡小明菜鸡vue全全家全家全家全家家桶",
          relect_name: '小明菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy1882',
          color: 'color3'
        },{
          ico: 'el-icon-document',
          title: "vue全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy127481',
          color: 'color1'
        },{
          ico: 'el-icon-star-off',
          title: "react全家桶react全家桶react全家桶react全家桶react全家桶react全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2014-09-09',
          view: 2141,
          id: 'zy213686',
          color: 'color2'
        },{
          ico: 'el-icon-star-off',
          title: "react全家桶react全家桶react全家桶react全家桶react全家桶react全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2014-09-09',
          view: 2141,
          id: 'zy2135485',
          color: 'color3'
        },{
          ico: 'el-icon-document',
          title: "全家全家vue全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy111184',
          color: 'color4'
        },{
          ico: 'el-icon-document',
          title: "全家全家全家全家vue全家桶",
          relect_name: '小明菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy121483',
          color: 'color5'
        },{
          ico: 'el-icon-document',
          title: "小明菜鸡小明菜鸡vue全全家全家全家全家家桶",
          relect_name: '小明菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy115482',
          color: 'color3'
        },{
          ico: 'el-icon-document',
          title: "小明家桶",
          relect_name: '菜鸡',
          relect_time: '2024-09-09',
          view: 41151,
          id: 'zy12482',
          color: 'color3'
        }
      ],
      key: ''
    }
  },
  methods:{
    changeKey(value){
      console.log(value)
      this.key = value        //获取参数测试，非父子组件传值到shar_xq用于内部标志分类查询
    }
  }
}
</script>

<style>
.invit_list{
  border-bottom: 1px dotted #969292;
  cursor: pointer;
  margin-top: 6px;
}
.i_nav_left{
  text-align: left;
  width: 68%;
  float: left;
  color: #36459b;
  margin-left: 6px;
}
.i_nav_right> span,
.i_nav_left >span{
  font-size: 13px;
  cursor: pointer;
}
.i_nav_left >span{
  font-size: 13px;
  margin-right: 3%;

}
.i_nav_right> span{
    margin-left: 12%;
}
.i_nav_right{
  text-align: left;
  width: 30%;
  float: right;
}
.invit_list:hover{
  border-bottom: 1px solid #969292;
}
.invit_list > div{
  line-height: 40px;
  float: left;
  height: 40px;
}
.i_nav::after,
.invit_list::after{
  content: '';
  display: block;
  clear: both;
}
.ico{
  width: 4%;
  font-size: 21px;
  color: #bb7b7b;
}
.invit_title{
  text-align: left;
  /* 超出隐藏 */
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  width: 65%;
  font-size: 16px;
}
.invit_user{
  width: 30%;
}
.invit_user>span{
  min-width: 60px;
  font-size: 13px;
  margin-left: 6.5%;
  display: inline-block;
}
.color1{
  color: #bb7b7b;
}
.color2{
  color: #56aab9;
}
.color3{
  color: #36629b;
}
.color4{
  color: #bdba2d;
}
.color5{
  color: #328856;
}
</style>